import React, {
    PureComponent
} from 'react';

import {
    View,
    StyleSheet
} from 'react-native';

import WebView from 'react-native-webview';

import {
    Layout,
    Loading
} from './../../components';

interface Props {
    uri:string,
    title:string
}

interface State {
    loading:boolean
}


class WebPage extends PureComponent<Props,State> {
    state = {
        loading:true
    }

    _onLoadEnd = () => {
        this.setState({
            loading:false
        })
    }

    render() {
        const {
            loading
        } = this.state;

        const {
            uri,
            title
        } = this.props;

        return (
            <Layout
                title={title}
                scroll={false}
                padding={false}
            >
                {!!uri && (
                    <WebView
                        source={{ uri: uri }}
                        onLoadEnd={this._onLoadEnd}
                    />
                )}
                {loading && (
                    <View style={styles.loading}>
                        <Loading.container />
                    </View>
                )}
            </Layout>
        )
    }
}

export default WebPage;

const styles = StyleSheet.create({
    loading:{
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        position: 'absolute',
        backgroundColor:`#fff`
    }
}) as any;